<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
    <meta name="keywords" content="getParameterByName,openInfoBubble,addMarkers" />
    <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>HERE Maps API for JavaScript Example: Pre-open an information bubble</title>
    <meta name="description" content="How to load a page with a read opened information bubbler"/>
    <meta name="keywords" content="infobubble, marker, map component, bubble"/>
    <!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
    <meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    
      <!-- Set up constants such as APP ID and token -->
    <script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
    <!-- Bootstrap jQuery Library -->
    <script type="text/javascript" src="libs/jQl.min.js"></script> 
    
    
    <!-- Asynchronously the HERE Maps API for JavaScript -->
    <script type="text/javascript" src="libs/hereAsyncLoader.js" 
      id="HereMapsLoaderScript" 
      data-map-container="mapContainer" 
      data-params="all" 
      data-callback="afterHereMapLoad" >
    </script>   
    <link rel="icon" href="http://here.com/favicon.ico"/>
    <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
  </head>
  <body>
    <h1>Opening Infobubbles</h1>
    <div id="mapContainer" style="width:540px; height:334px;"></div>
    <div id="uiContainer">
      Click on a link to pre-open the info bubble:<br/>
      <a href="opening-infobubble-with-id.html?id=1">Brandenburg Gate</a><br/>
      <a href="opening-infobubble-with-id.html?id=2">Ferhsehturm</a><br/>
      <br/>      
    </div>
<script id="example-code" data-categories="infobubbles" type="text/javascript">
//<![CDATA[
var map,
  infoBubbles,
  container;

function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
  results = regex.exec(location.search);
  return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}


function openInfoBubble() {
  var param = getParameterByName('id'),
    TOUCH = nokia.maps.dom.Page.browser.touch,
    CLICK = TOUCH ? 'tap' : 'click',
    len = container.objects.getLength(),
    i;
  if (param === '') {
    return; // Don't open a bubble.
  }
  // Iterate through the markers to find the correct id.
  for (i = 0; i < len; i += 1) {
    if (param === container.objects.get(i).id) {
      // fire an event to open the bubble.

      container.dispatch(
        new nokia.maps.dom.Event(
          {type: CLICK,
            target: container.objects.get(i)}
        )
      );
      map.zoomTo(container.objects.get(i).getBoundingBox(), true);
      break;
    }
  }
}

function addMarkers(map) {
  container = new nokia.maps.map.Container();

  /* Add two markers and their infoBubble text
  * along with a unique id attribute
  */
  var brandenburgerTorMarker = new nokia.maps.map.StandardMarker(
    new nokia.maps.geo.Coordinate(52.516237, 13.377686),
    {bubbleText : 'Brandenburger Tor',
      id : '1'  }
  ),
  //
  // The Infobubble attribute can also be HTML.
  //
    infoBubbleHTML = '<div>' +
    '<h2>InfoBubble with HTML content<\/h2>' +
    '<img width=120 height=90 src=' +
    '\'http://upload.wikimedia.org/wikipedia/commons/' +
    '8/84/Berlin-fernsehturm.JPG\' ' +
    'alt=\'\'/><br/><b>Fernsehturm, Berlin<\/b>' +
    '<\/div>',
    fernsehturmMarker = new nokia.maps.map.StandardMarker(
      new nokia.maps.geo.Coordinate(52.520816, 13.409417),
      {bubbleText : infoBubbleHTML,
        id : '2'  }
    ),
    TOUCH = nokia.maps.dom.Page.browser.touch,
    CLICK = TOUCH ? 'tap' : 'click';
  // Add the markers onto the map
  container.objects.addAll([brandenburgerTorMarker, fernsehturmMarker]);

  // Add a listener to the on click event for the markers.
  container.addListener(CLICK, function (evt) {
    // Set the tail of the bubble to the coordinate of the marker
    infoBubbles.openBubble(evt.target.bubbleText, evt.target.coordinate);
  });
  map.objects.add(container);
}


function afterHereMapLoad(theMap) {
  map = theMap;
  map.set('center', new nokia.maps.geo.Coordinate(52.52, 13.37));
  map.setZoomLevel(13);

  infoBubbles = new nokia.maps.map.component.InfoBubbles();
  map.components.add(infoBubbles);
  addMarkers(map);
  openInfoBubble();
}
//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
  </body>
</html>